<template>
	<view class="couponBox">
		<view class="coupon" v-for="(listitem,index) in list" :key="index">
			<view class="couLeft">
				<view class="tit" v-if="listitem.goods_type == 1">平台通用</view>
				<view class="tit" v-else>指定分类可用</view>
				<view class="goods">
					<view class="row" v-for="(ite,iIndex) in listitem.goods" :key='iIndex'>
						<view class="img"><image :src="ite.img" mode="widthFix"></image></view>
						<view class="price">￥{{ite.retail_price}}</view>
					</view>
				</view>
			</view>
			<view class="couRight">
				<view class="money" v-if="listitem.free_type == 1">￥<text>{{listitem.coupon_price}}</text></view>
				<view class="money" v-else><text>{{listitem.coupon_price}}</text>折</view>
				<view class="note">满{{listitem.price}}元可用</view>
				<view class="btn" @click="receivecoupon(listitem.id)">立即领取</view>
			</view>
			<!-- 四份之一的圆 -->
			<view class="class_div_bg" >
				<view class="class_div_arc1"></view>
				<view class="class_div_arc2"></view>
				<view class="class_div_arc3"></view>
				<view class="class_div_arc4"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				list:[]
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
		},
		onShow() {
			var that = this
			if(!that.hasLogin){
				uni.navigateTo({
					url:'/pages/public/login'
				})
				return false
			}
			var _param = {
				token:that.userInfo.token,
				page:1,
				size:20
			}
			that.$api.getUrl(that.$api._api.ApiIndexCoupon,_param,function(res){
				that.list = res.data
			})
		},
		methods: {
			shopdetail:function(){
				this.$api.msg("店铺详情")
			},
			//立即领取
			receivecoupon:function(id){
				var that = this
				var token = that.userInfo.token
				var _param = {
					token:token,
					id:id
				}
				that.$api.postUrl(that.$api._api.ApiIndexCoupon,_param,function(res){
					that.$api.msg('领取成功!')
				})
			},
			...mapMutations(['login']),
		}
	}
</script>

<style lang="scss">
	.couponBox{padding: 30rpx;
		.coupon{background:#fff;display: flex;border-radius:15rpx;position: relative;margin-bottom: 30rpx;
			.couLeft{padding: 20rpx;flex:1;
				.tit{font-size: 28rpx;font-weight:bold;}
				.goods{display: flex;align-items: center;margin-top:30rpx;
					.row{width: 33.333%;text-align: center;}
					.img{width:120rpx;height:120rpx;image{width: 100%;height: 100%;object-fit: cover;}}
					.price{margin-top:4rpx;color:#666;font-size: 24rpx;}
				}
			}
			.couRight{width:240rpx;background: #fff2f0;display: flex;flex-direction: column;
				border-radius: 0 15rpx 15rpx 0;border-left: 1px dashed #f2f0f0;
				align-items: center;justify-content: center;color:#f21a0c;
				.money{font-size: 32rpx;font-weight: bold;text{font-size: 55rpx;}}
				.note{font-size: 24rpx;}
				.btn{margin-top:30rpx;background:#f21a0c;color:#fff;padding: 6rpx 20rpx 8rpx 20rpx;z-index:10;
				border-radius: 50rpx;font-size: 24rpx;}
			}
			.class_div_bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;
				.class_div_arc1,.class_div_arc2,.class_div_arc3,.class_div_arc4{
					width:15rpx;height:15rpx;background-color:#f0f0f0;position: absolute;
				}
				.class_div_arc1 {border-radius: 0 0 100% 0;right:226rpx;top: 0;}
				.class_div_arc2 {border-radius: 0 0 0 100%;right:240rpx;top: 0;}
				.class_div_arc3 {border-radius: 0 100% 0 0;right:226rpx;bottom: 0;}
				.class_div_arc4 {border-radius: 100% 0 0 0;right:240rpx;bottom: 0;
				}
			}
		}
	}
</style>
